<template>
  <div class="workbench2">

    <div v-show="isListShow">
      <header>
        <div class="header1">
          <div class="search searchMini">
            <div class="homeSearch icoo"></div>
            <input type="text" v-model="searchValue" class="homeInput" placeholder="输入关键字" maxlength="20" />
            <img draggable="false" src="static/image/home/clear_icon.png" class="s_clear_icon" @click="searchValue = ''" v-show="searchValue.trim() != ''" />
          </div>
          <div class="search searchPerson" style="position: relative;">
            <div class="orgSearch icoo"></div>
            <input id="departSearch" type="text" class="homeInput" placeholder="选择发布部门" v-model="departmentLabel" readonly="readonly" @focus="showTree = true" />
            <img draggable="false" src="static/image/home/clear_icon.png" class="s_clear_icon" @click="selDepartment()" v-show="departmentLabel.trim() != ''" />
            <Un-tree-select v-if="showTree" @selDepartment="selDepartment" @closeTree="closeTree" />
          </div>
          <div class="search searchTime">
            <el-date-picker v-model="sTime" type="datetimerange" align="right" unlink-panels format="yyyy.MM.dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" :picker-options="$store.state.pickerOptions">
            </el-date-picker>
          </div>
          <div class="number" @click="searchMore = !searchMore">
            <img v-show="searchMore" src="static\image\search\input_more_pick.png" style="width: 10px; height: 10px" />
            <img v-show="!searchMore" src="static\image\search\input_more.png" style="width: 10px; height: 10px" />
          </div>
        </div>
        <div class="header2" v-show="searchMore">
          <div class="search searchPerson">
            <div class="perSearch icoo"></div>
            <input type="text" v-model="sendUserName" class="homeInput" placeholder="搜索发布人" @keyup.enter="searchKeyUp()" />
            <img draggable="false" src="static/image/home/clear_icon.png" class="s_clear_icon" @click="searchValuePerson = ''" v-show="searchValuePerson.trim() != ''" />
          </div>
          <div class="search">
            <div class="readSearch icoo"></div>
            <el-select class="my_el_select" v-model="broadIsRead" placeholder="全部">
              <el-option label="全部" value="2"></el-option>
              <el-option label="已读" value="1"></el-option>
              <el-option label="未读" value="0"></el-option>
            </el-select>
          </div>
          <div class="search">
            <div class="typeSearch icoo"></div>
            <el-select class="my_el_select" v-model="broadType" placeholder="通知类型">
              <el-option label="全部类型" value="2"></el-option>
              <el-option label="公告" value="0"></el-option>
              <el-option label="广播" value="1"></el-option>
            </el-select>
          </div>
          <!-- <div class="search">                      
                        <div class="perSearch icoo"></div>
                        <input type="text" v-model="input6" class="homeInput" placeholder="选择发布部门">
                        <img
                        draggable="false"
                        src="static/image/home/clear_icon.png"
                        class="s_clear_icon"
                        @click="input6=''"
                        v-show="input6.trim() != ''"
                        />            
                    </div>  -->
        </div>
      </header>
      <main>
        <ul>
          <li v-for="(temp, index) in this.search_list_array.broad" :key="index + '_key'" class="listInfo" @click="openBroadItem(temp)">
            <div style="width: 100%">
              <p class="item">
                <span class="title">
                  <img v-if="temp.isRead == 0" src="static/image/search/tag_unread.png" />
                  {{ temp.title }}
                </span>
                <span class="grey">{{ temp.name }} | {{ temp.time | getTimeAll }}</span>
              </p>
              <p>
                <span class="grey" v-html="
                    $replaceKeyWords(
                      htmlReplace(temp.value),
                      oldsearchval,
                      '#fa7500',
                      36
                    )
                  "></span>
              </p>
            </div>
          </li>
        </ul>
      </main>
      <div class="foot" v-show="total > 1">
        <div class="btn_d">
          <img src="static\image\home\page_last_s.png" style="width: 16px; height: 16px" :class="{ 'foot-op': this.nowPage == 1 }" @click="nextPage" />
          <img src="static\image\home\page_next_s.png" style="width: 16px; height: 16px" :class="{ 'foot-op': this.nowPage >= this.total }" @click="lastPage" />
        </div>
        <span style="color: #e6e6e6; margin: 0 8px 5px 8px">|</span>
        <span style="margin: 0 0px 3px 3px">当前第 {{ nowPage }} 页 共 {{ total }} 页</span>
      </div>
    </div>
    <broad-detail v-if="!isListShow" :broad_show_item="searchBroadItem" :detailArray="search_list_array.broad" :isListShow="isListShow" :recordId="recordId" @broadClose="isListShow = !isListShow"
      @downloadListAddProcess="downloadListAddProcess" @back="isListShow = true" @openBroadItem="openBroadItem">
    </broad-detail>
  </div>
</template>

<script>
import broadDetail from "./broad-detail.vue"; //组织架构列表组件
import UnTreeSelect from "../universal/unTreeSelect.vue";
export default {
  name: "structureMain",
  props: {
    searchQuery: {
      default: "",
    },
    comprehensive: "",
    setHistoryMsg: {
      type: Function,
    },
  },
  components: {
    broadDetail,
    UnTreeSelect,
  },
  data() {
    return {
      oldsearchval: "",
      searchValue: "",
      showTree: false,
      searchBroadItem: "",
      groupListShow: "",
      isListShow: true,
      rightShow: false,
      searchMore: false,
      input2: "",
      sTime: [],
      input4: "",
      input5: "",
      input6: "",
      detailArray: [],
      defaultImg: 'this.src="static/image/home/person_1.png"',
      recordId: "",
      staticArray: [],
      searchArray: [],
      broadIsRead: "全部",
      pageNumBroad: 1,
      startTimeS: "",
      endTimeS: "",
      searchValuePerson: "",
      departmentValue: "",
      departmentLabel: "",
      broadType: "2",
      sendUserName: "",
      nowPage: 1,
      total: 0,
      size: 7,
    };
  },
  computed: {
    myInfo() {
      return this.$store.state.myInfo;
    },
    search_list_array: {
      get() {
        return this.$store.state.search_list_array;
      },
      set(val) {
        this.$store.commit("setsearchListArr", val);
      },
    },
    // searchValue: {
    //   get() {
    //     return this.$store.state.searchValue;
    //   },
    //   set(val) {
    //     this.$store.commit("setsearchValue", val);
    //   },
    // },
    // oldsearchval: {
    //   get() {
    //     return this.$store.state.oldsearchval;
    //   },
    //   set(val) {
    //     this.$store.commit("setoldsearchval", val);
    //   },
    // },
    sqlTable() {
      return {
        broadcastList: `broadcast_list_${this.myInfo.id}`, //广播列表
        userInformation: `user_information_${this.myInfo.id}`, //用户信息表
      };
    },
  },
  watch: {
    sendUserName(newVal, oldVal) {
      this.changeValueSearch(newVal, oldVal);
    },
    searchValue(newVal, oldVal) {
      this.changeValueSearch(newVal, oldVal);
    },
    sTime() {
      this.searchKeyUp();
    },
    broadIsRead() {
      this.searchKeyUp();
    },
    broadType() {
      this.searchKeyUp();
    },
    "$store.state.search_list_array"() {
      this.total = Math.ceil(this.search_list_array.broad.length / this.size);
      this.paginationList();
    },

    comprehensive(val) {
      this.searchValue = val;
    },
    searchQuery(val) {
      this.searchValue = val;
    },
  },
  methods: {
    fn1(e) {},
    nextPage() {
      //上一页
      if (this.nowPage <= 1) {
        return false;
      } else {
        this.nowPage--;
        this.paginationList();
      }
    },
    lastPage() {
      //下一页
      if (this.nowPage >= this.total) {
        return false;
      } else {
        this.nowPage++;
        this.paginationList();
      }
    },
    paginationList() {
      let isReadS =
        this.broadIsRead == 2 || this.broadIsRead == "全部"
          ? ""
          : `AND isRead = '${this.broadIsRead}'`;
      let broadTypeS =
        this.broadType == 2 ? "" : `AND aType = '${this.broadType}'`;
      let broadUserNameS = this.sendUserName
        ? `AND a.broadSendName LIKE '%${this.sendUserName}%' `
        : "";
      let departmentValueS = this.departmentValue
        ? `AND (deptIds LIKE '%${this.departmentValue}%')`
        : "";
      //数组分页
      let broad_list = this.$operationalDatabase(
        `SELECT a.*,b.* FROM ${this.sqlTable.broadcastList} a,${
          this.sqlTable.userInformation
        } b WHERE (a.value LIKE '%${this.oldsearchval}%' OR a.title LIKE '%${
          this.oldsearchval
        }%')${broadUserNameS} ${departmentValueS} ${this.startTimeS} ${
          this.endTimeS
        }${isReadS}${broadTypeS} AND a.broadSendId=b.id GROUP BY messageId ORDER BY time DESC LIMIT ${
          (this.nowPage - 1) * this.size
        }, ${this.size}`,
        1
      );
      this.search_list_array.broad = broad_list.list;
      this.$forceUpdate();
    },
    selDepartment(value) {
      if (value) {
        this.departmentLabel = value.label;
        this.departmentValue = value.id;
      } else {
        this.departmentLabel = "";
        this.departmentValue = "";
      }
      this.showTree = false;
      this.searchKeyUp();
    },
    closeTree() {
      console.warn("拿到了");
      this.showTree = false;
    },
    fun1(temp) {
      this.staticArray = { ...temp };
      this.searchArray = { ...temp };
      this.detailArray = temp.data;
      this.$shell("DrawTitleColor", ["#222", "#bbb"]);
    },
    fn2(temp) {
      this.recordId = temp.messageId;
      this.isListShow = false;
    },
    openBroadItem(item) {
      item.isRead = 1;
      this.isListShow = false;
      this.recordId = item.messageId;
      let arr = this.$utilJs.initBroadFile([item]);
      this.searchBroadItem = arr[0];
      this.$operationalDatabase(
        `UPDATE ${this.sqlTable.broadcastList} SET isRead = '1' WHERE messageId='${this.searchBroadItem.messageId}';`
      );
    },
    // 查询广播，zk118标注，搜索时，广播查找本地数据库
    get_broad_records() {
      let isReadS =
        this.broadIsRead == 2 || this.broadIsRead == "全部"
          ? ""
          : `AND isRead = '${this.broadIsRead}'`;
      let broadTypeS =
        this.broadType == 2 ? "" : `AND aType = '${this.broadType}'`;
      let broadUserNameS = this.sendUserName
        ? `AND a.broadSendName LIKE '%${this.sendUserName}%' `
        : "";
      let departmentValueS = this.departmentValue
        ? `AND (deptIds LIKE '%${this.departmentValue}%')`
        : "";
      let totalS = this.$operationalDatabase(
        `SELECT count(*) total 
        FROM ${this.sqlTable.broadcastList} a,${this.sqlTable.userInformation} b 
        WHERE (a.value LIKE '%${this.oldsearchval}%' OR a.title LIKE '%${this.oldsearchval}%') 
        ${broadUserNameS} ${departmentValueS} ${this.startTimeS} ${this.endTimeS}${isReadS}${broadTypeS} 
        AND a.broadSendId=b.id 
        GROUP BY messageId`,
        1
      );
      this.total = Math.ceil(totalS.list.length / this.size);
      return;
    },
    searchKeyUp() {
      let info = this.searchValue.replace(/\s+/g, ""); // 去除空格
      this.oldsearchval = info; //zk125新增，保存上次搜索内容，便于展示
      this.pageNumBroad = 1; // 初始化分页 广播
      let ct1 = "";
      let ct2 = new Date().getTime();
      if (
        !this.oldsearchval &&
        !this.sTime &&
        !this.sendUserName &&
        !this.broadType &&
        !this.broadIsRead
      ) {
        ct1 = ct2 - 86400000;
      }
      if (this.sTime) {
        ct1 = new Date(this.sTime[0]).getTime();
        ct2 = new Date(this.sTime[1]).getTime();
      }
      this.startTimeS = ct1 ? `AND time >= '${ct1}'` : "";
      this.endTimeS = ct2 ? `AND time <= '${ct2}'` : "";
      this.nowPage = 1;
      this.get_broad_records();
      this.paginationList();
    },
    htmlReplace(text) {
      let reg = /<[^>]+>|[&nbsp;]+/g;
      let value = text.replace(reg, "");
      return value;
    },
    changeValueSearch(val, oldVal) {
      //监听input框的值改变
      clearTimeout(this.timer); //先清除之前的定时器
      this.timer = setTimeout(() => {
        if (oldVal !== val) {
          this.searchKeyUp();
        }
      }, 500);
    },
    downloadListAddProcess(e) {
      this.$emit("downloadListAddProcess", e);
    },
  },
  mounted() {
    this.searchKeyUp();
  },
};
</script>
<style lang="less" scoped>
header {
  margin: 8px 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
  .header1 {
    display: flex;
    align-items: center;
  }
  .header2 {
    margin-top: 8px;
    display: flex;
  }
}
main {
  text-align: left;
  margin: 0 12px;
  height: calc(100vh - 140px);
  overflow-y: scroll;
  .listInfo {
    height: 66px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    p {
      padding: 0 12px;
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 6px;
      .title {
        font-size: 14px;
        font-weight: 600;
        img {
          margin-right: 6px;
        }
      }
      .time {
        color: #999;
      }
    }
  }
  .listInfo:nth-child(even) {
    background-color: #f5f5f5;
  }
}
.search {
  text-align: left;
  background-color: #f7f7f7;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin: 0 4px;
  input {
    font-size: 12px;
  }
  .homeInput {
    background-color: #f7f7f7;
    width: 70%;
  }
  .s_clear_icon {
    margin-right: 10px;
    cursor: pointer;
  }
  /deep/.el-input__inner {
    background-color: #f7f7f7;
    border: none;
    height: 30px;
    font-size: 12px;
    .el-range-input {
      background-color: #f7f7f7;
      line-height: 30px;
      width: 56%;
      font-size: 12px;
    }
  }
  /deep/.el-date-editor {
    width: 180px !important;
  }
  /deep/.my_el_select {
    width: 120px;
  }
  /deep/.el-range-separator {
    padding: 0;
    width: 10px;
  }
  /deep/.ant-select-selection {
    background-color: #f7f7f7;
    padding-left: 10px;
    font-size: 12px;
    border: none;
  }
}
.searchTime {
  /deep/.el-input__inner {
    padding: 0 10px;
  }
}
.item1 {
  cursor: pointer;
  width: calc(100% + 7px); //zk标记，抵消滚动条的宽度
  img {
    margin: 0 6px;
  }
  .itemcontent {
    flex: 1;
    text-align: left;
    margin: 0 30px 0 10px;
    max-width: 300px;
    font-size: 14px;
    span {
      color: #999;
      margin-right: 10px;
    }
    .name {
      font-size: 16px;
      color: #333;
      // font-weight: bold;
      line-height: 20px;
    }
    .value {
      color: #666;
      line-height: 22px;
      font-size: 14px;
      word-break: break-all;
    }
  }
  .title {
    font-size: 14px;
    font-weight: 600;
  }
}
.grey {
  color: #999;
}
.blank {
  height: 6px;
  background-color: #eeeeee;
}
.workbench2 {
  height: calc(100% - 40px);
}
.foot {
  display: flex;
  height: 30px;
  background: white;
  border-top: 1px solid #e5e5e5;
  align-items: center;
  width: 100%;
  position: fixed;
  padding-left: 20px;
  bottom: 0px;
}
.foot-op {
  opacity: 0.5;
}
</style>